<template>
  <div class="nav-card__wrap">
    <div class="nav-card" @mouseover="handleMouseOver" @mouseleave="handleMouseLeave">
      <div class="nav-card__container">
        <div
          class="nav-card__label"
          :style="{backgroundColor: isBlue ? '#00AAE6' : '#fff'}"
        ></div>
        <p @click="childList.length===0?changeRoute1(labelId?{path:navAddress,  query:{type:labelId}}:{path:navAddress}):null" :style="{color: isBlue || fontColor ? '#00AAE6' : '#666'}">
          <slot></slot>
        </p>
          <div class="nav-card__menu" v-if="isShow===true && childList.length > 0" >
            <div class="arrow"></div>
            <div class="label-list-box">
              <p
                class="label-list"
                v-for="(item, key) in childList"
                :key="`${item}${key}`"
                :style="{color:  item.childId===type ? '#00AAE6' : '#666'}"
                @click="changeRoute1({path: item.address, query: { type: item.childId}})"
                >

                {{item.label}}
              </p>
            </div>
          </div>
         <yun-icon name="left_arrow" size="12px" :color="isBlue?'#00AAE6' : '#999'" v-if="childList.length>0"></yun-icon>
      </div>
    </div>
  </div>
</template>

<script>

  export default {
  name: "navCard",
  props: {
    childList: {
      type:Array,
      default:() => ([])
    },
    navAddress: String,
    labelId: [String,Number]
  },
  data(){
    return{
      fontColor: false,
      isShow: false,
      isBlue: false,
      type:'',
    }
  },
  created() {
    this.type = this.$route.query.type
    if(this.childList.length>0){

      for (let i = 0; i <this.childList.length ; i++) {
        if(this.$route.query.type===this.childList[i].childId){
          this.isBlue = true;
          return false;

        }else{
          this.isBlue = false;
        }
      }
      return false;

    }
    if (this.$route.query.type) {
      this.isBlue = this.$route.query.type===this.labelId;
    } else {
     this.isBlue = this.$route.path.indexOf(this.navAddress) !== -1 &&(this.$route.path.indexOf('personal-center') !== -1||this.$route.path.indexOf('search') !== -1||this.$route.path.indexOf('/web/') !== -1);
    }

  },
  watch:{

    $route(to,from){
      this.type = this.$route.query.type

      if(this.childList.length>0){

        for (let i = 0; i <this.childList.length ; i++) {
          if(this.$route.query.type===this.childList[i].childId){
            this.isBlue = true;
            return false;

          }else{
            this.isBlue = false;
          }
        }
        return false;

      }
      if (this.$route.query.type) {
        this.isBlue = this.$route.query.type===this.labelId;
      } else {

        this.isBlue = this.$route.path.indexOf(this.navAddress) !== -1 &&(this.$route.path.indexOf('personal-center') !== -1||this.$route.path.indexOf('search') !== -1||this.$route.path.indexOf('/web/') !== -1);
      }
    }
  },
  methods:{
    handleMouseLeave(){
      this.isShow = false;
      this.fontColor = false;
    },
    handleMouseOver(){
      this.isShow = true;
      this.fontColor = true;
    },
    changeRoute1(route){
      this.$router.push(route)
    }
  }
}
</script>

<style lang="scss" scoped>
.nav-card__wrap{
  .nav-card{
    padding-bottom: 18*$length;
    .nav-card__container{
      position: relative;
      @include fontStyle(14,18,500,#666,left);
      @extend %cursorPointer;
      @extend %animate-transition;
      @extend %flex-row-spb;
      justify-content: flex-start;
      .nav-card__label{
        width: 4*$length;
        height: 16*$length;
        border-radius: 0 2*$length 2*$length 0;
        background-color: #00AAE6;
      }
      > p{
        width: 100%;
        padding-left: 14*$length;
        @extend %animate-transition;
        &:hover{
          color: #00AAE6;
        }
        .nav-card__label2{
          margin-left: 14*$length;
          background-color: #fff;
        }
      }
      .nav-card__menu{
        position: absolute;
        z-index: 999;
        left: 18*$length;
        top: 25*$length;
        background-color: #fff;
        @include box-shadow(0 6*$length 20*$length rgba(0,0,0,.1));
        @include border-radius(4*$length);
        .label-list-box{
          box-sizing: border-box;
          min-width: 100*$length;
          max-width: 500*$length;
          padding: 21*$length 0 16*$length;
          display: grid;
          grid-template-columns:auto auto;
          .label-list{
            word-break: break-all;
            white-space: nowrap;
            padding-left:20px;
            padding-right:20px;
            margin-bottom: 10*$length;
            //@extend %nowrap;
            @include fontStyle(14,20,500,#666,left);
            @extend %animate-transition;
            &:hover{
              color: #00AAE6!important;
            }
          }
        }
        .arrow{
          position: absolute;
          top: -15*$length;
          left: 25*$length;
          width: 0;
          height: 0;
          border: 8*$length solid;
          border-color: transparent transparent #fff;
        }
      }
    }
  }
}
</style>
